
<template>
  <div class="ai-dialog">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>AI 对话</span>
        </div>
      </template>
      <div class="message-container">
        <div v-for="(msg, index) in messages" :key="index" class="message">
          <p :class="msg.isUser ? 'user-message' : 'ai-message'" style="white-space: pre-wrap;">{{ msg.content }}</p>
        </div>
      </div>
    </el-card>
    <!-- 将输入框移到外部，并设置为固定定位 -->
    <div class="input-container">
      <el-input
        v-model="inputMessage"
        placeholder="请输入消息"
        @keyup.enter="sendMessage"
      ></el-input>
      <el-button
        type="primary"
        @click="sendMessage"
        :disabled="isLoading"
        :loading="isLoading"
      >发送</el-button>
    </div>
  </div>
</template>

<script>export default {
  data() {
    return {
      inputMessage: '',
      messages: [],
      isLoading: false
    };
  },
  mounted() {
    // 从 localStorage 中加载历史对话
    const savedMessages = localStorage.getItem('aiMessages');
    if (savedMessages) {
      this.messages = JSON.parse(savedMessages);
    } else {
      // 默认显示一条 AI 消息
      this.messages.push({ content: '您好，我有什么可以帮助您的呢？', isUser: false });
    }
    // 启动定时器，每五分钟清除一次历史记录
    this.clearHistoryInterval = setInterval(() => {
      this.clearHistory();
    }, 5 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
  },
  methods: {
    // 将消息容器的滚动条滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$el.querySelector('.message-container');
        container.scrollTop = container.scrollHeight;
      });
    },
    async sendMessage() {
      if (this.isLoading || this.inputMessage.trim() === '') return;
      this.isLoading = true;
      try {
        // 将用户消息添加到消息列表
        this.messages.push({ content: this.inputMessage, isUser: true });
        // 调用 AI 对话 API 并传递用户消息
        const response = await this.$request.post('/ai/talk', { message: this.inputMessage });
        // 清空输入框
        this.inputMessage = '';
        console.log('AI Response:', response);
        // 解析后端返回的 JSON 响应
        const aiResponse = response.message; // 提取消息内容
        // 添加 AI 回复到消息列表
        this.messages.push({ content: aiResponse, isUser: false });
        // 保存历史对话到 localStorage
        localStorage.setItem('aiMessages', JSON.stringify(this.messages));
        this.scrollToBottom();
      } catch (error) {
        console.error('请求失败:', error);
        this.messages.push({ content: 'AI 未响应，请稍后再试。', isUser: false });
        // 保存历史对话到 localStorage
        localStorage.setItem('aiMessages', JSON.stringify(this.messages));
      } finally {
        // 无论成功或失败，都重置 isLoading 状态
        this.isLoading = false;
      }
    },
    // 清除历史记录
    clearHistory() {
      localStorage.removeItem('aiMessages'); // 清除 localStorage 中的数据
      this.messages = []; // 重置 messages
      // 默认显示一条 AI 消息
      this.messages.push({ content: '您好，我有什么可以帮助您的呢？', isUser: false });
    },
  }
};
</script>

<style scoped>.ai-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 高度占满视口 */
  width: 100%; /* 宽度占满视口 */
  margin: 0 auto; /* 水平居中 */
}

.box-card {
  width: 80%; /* 宽度占视口的 80% */
  height: calc(100vh - 120px); /* 调整高度，留出输入框的空间 */
  overflow-y: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.message-container {
  padding: 10px;
  height: calc(100% - 60px); /* 调整高度，留出标题和输入框的空间 */
  overflow-y: auto;
}

.message {
  margin-bottom: 10px;
}

.user-message {
  background-color: #409EFF; /* 蓝色背景 */
  color: #FFFFFF; /* 白色字体 */
  padding: 8px 12px; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  max-width: 80%; /* 最大宽度 */
  min-width: 50px; /* 最小宽度 */
  width: fit-content; /* 根据内容自适应宽度 */
  margin-left: auto; /* 用户消息靠右 */
}

.ai-message {
  background-color: #F5F7FA; /* 灰色背景 */
  color: #000000; /* 黑色字体 */
  padding: 8px 12px; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  max-width: 80%; /* 最大宽度 */
  min-width: 50px; /* 最小宽度 */
  width: fit-content; /* 根据内容自适应宽度 */
  margin-right: auto; /* AI 消息靠左 */
}

.input-container {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 紧贴页面底部 */
  left: auto; /* 水平居中 */
  width: 72.5%; /* 宽度占视口的 80% */
  background-color: white; /* 背景色 */
  padding: 10px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  z-index: 1000; /* 确保输入框在最上层 */
  display: flex;
}
</style>
